<template>
  <ContainerGroup
    class="dept-container"
    style="flex-direction: row; box-sizing: border-box"
  >
    <!-- 右侧表格展示区域开始 -->
    <Container
      class="query-box"
      style="padding: 0; background: #f0f2f5"
      :height="height"
    >
      <!-- 查询 -->
      <Container style="margin-bottom: 12px">
        <div class="query-form">
          <FilterForm
            ref="filterForm"
            :elements="queryForm"
            @reset="reset"
            @submit="handleSearch"
          />
        </div>
      </Container>

      <!-- 表格展示 -->
      <Container
        class="rule-detail"
        style="height: calc(100% - 67px); overflow: hidden"
      >
        <!-- 功能按钮 -->
        <div class="button-bar">
          <Button icon="add" @click="addDetail">新增</Button>
        </div>

        <!-- 表格 -->
        <div class="table-box">
          <el-table
            v-loading="loading"
            :data="ruleDetail"
            default-expand-all
            border
            :header-cell-style="{
              background: '#fafafa',
              borderColor: '#e7ecf8',
            }"
            row-key="code"
            height="100%"
          >
            <el-table-column
              align="center"
              type="index"
              label="序号"
              width="60"
            />
            <el-table-column prop="deptCode" label="部门编号" />
            <el-table-column prop="deptName" label="部门名称" />
            <el-table-column prop="pdeptCode" label="科室编号" />
            <el-table-column prop="pdeptName" label="科室名称" />
            <el-table-column align="center" label="操作" width="120">
              <template slot-scope="scope">
                <!-- <el-tooltip
                  class="item"
                  effect="dark"
                  content="编辑"
                  placement="top"
                >
                  <i
                    class="el-icon-edit-outline"
                    style="
                      padding-top: 4px;
                      font-size: 20px;
                      color: #207efa;
                      cursor: pointer;
                    "
                    @click="editDetail(scope.row)"
                  />
                </el-tooltip> -->
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="删除"
                  placement="top"
                  style="margin-left: 10px"
                >
                  <i
                    class="el-icon-delete"
                    style="
                      padding-top: 4px;
                      font-size: 20px;
                      color: #207efa;
                      cursor: pointer;
                    "
                    @click="deleteDetail(scope.row)"
                  />
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页 -->
        <Pagination
          :total="pageAttr.total"
          :page="pageAttr.currentPage"
          :page-size="pageAttr.pageSize"
          @pagation="pagationChange"
        />
      </Container>
      <!-- 右侧表格展示区域结束 -->

      <!-- 对话框区域开始 -->
      <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="40%"
        @close="dialogClose"
      >
        <el-form ref="form" :model="form" label-width="120px" size="mini">
          <el-form-item label="部门：" prop="deptCode">
            <el-select
              v-model="form.deptCode"
              :disabled="deptDisabled"
              filterable
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in deptLists"
                :key="index"
                :value="item.deptCode + '/' + item.deptName"
                :label="item.deptName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所属科室：" prop="pdeptCode">
            <el-select v-model="form.pdeptCode" filterable clearable style="width: 100%">
              <el-option
                v-for="(item, index) in parentsList"
                :key="index"
                :value="item.deptCode + '/' + item.deptName"
                :label="item.deptName"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="dialogClose">取 消</el-button>
          <el-button
            :loading="btnLoaing"
            type="primary"
            size="mini"
            @click="dialogCommit"
          >确 定</el-button>
        </span>
      </el-dialog>
      <!-- 对话框区域结束 -->

    </Container>
    <!-- 右侧表格展示区域结束 -->
  </ContainerGroup>
</template>

<script>
import { getBdPerformance, getDepartment, getPDepartment, addPerformance, batchDeletePerformance } from '../../../utils/apis/performance/index.js'

export default {
  name: 'KeShiBuMen', // 科室部门对应
  components: {},
  data() {
    return {
      loading: false,
      dialogTitle: '',
      deptLists: [], // 所有部门
      dialogVisible: false,
      sureBtnBool: false,
      deptDisabled: false,
      // 分页参数
      pageAttr: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      ruleDetail: [],
      // container高度
      height: 'fill',
      // 查询表单参数
      queryForm: [
        {
          label: '部门编码',
          key: 'deptCode',
          type: 'Select',
          clearable: true,
          value: '',
          filterable: true,
          remote: true,
          remoteMethod: this.unitCodeFilter,
          itemLabel: 'deptCode',
          itemValue: 'deptCode',
          options: []
        },
        {
          label: '部门名称',
          key: 'deptName',
          type: 'Select',
          clearable: true,
          value: '',
          filterable: true,
          remote: true,
          remoteMethod: this.unitFilter,
          itemLabel: 'deptName',
          itemValue: 'deptName',
          options: []
        },
        {
          label: '科室编码',
          key: 'pdeptCode',
          type: 'Select',
          clearable: true,
          value: '',
          filterable: true,
          remote: true,
          remoteMethod: this.deptCodeFilter,
          itemLabel: 'deptCode',
          itemValue: 'deptCode',
          options: []
        },
        {
          label: '科室名称',
          key: 'pdeptName',
          type: 'Select',
          clearable: true,
          value: '',
          filterable: true,
          remote: true,
          remoteMethod: this.deptFilter,
          itemLabel: 'deptName',
          itemValue: 'deptName',
          options: []
        }
      ],
      isEdit: false,
      // 新增或编辑表单
      form: {
        pdeptCode: '',
        deptCode: ''
      },
      deptList: [],
      parentsList: [],
      btnLoaing: false
    }
  },
  created() {
  },
  mounted() {
    getDepartment().then((res) => {
      if (res.data.code === 200) {
        this.deptLists = res.data.data
      }
    })
    getPDepartment().then((res) => {
      if (res.data.code === 200) {
        this.parentsList = res.data.data
      }
    })
  },
  methods: {
    // 获取页面数据
    getData(val) {
      const params = {
        pageNum: this.pageAttr.currentPage,
        pageSize: this.pageAttr.pageSize,
        ...val
      }
      this.loading = true
      getBdPerformance(params).then((res) => {
        if (res.data.code === 200) {
          this.ruleDetail = res.data.data.records
          this.pageAttr.total = res.data.data.total
          this.loading = false
        } else {
          this.loading = false
          this.$message.error(res.data.message)
        }
      })
    },
    handleSearch(data) {
      this.pageAttr.currentPage = 1
      this.getData(data)
    },
    pagationChange(payload) {
      this.pageAttr.currentPage = payload.page
      this.pageAttr.pageSize = payload.pageSize
      const params = this.$refs.filterForm.getParms()
      this.getData(params)
    },
    // 科室编码模糊查询
    deptCodeFilter(val) {
      getPDepartment({
        DeptCode: val
      }).then((res) => {
        if (res.data.code === 200) {
          if (res.data.data.length) {
            this.queryForm[2].options = res.data.data
          }
        }
      })
    },
    // 科室名称模糊查询
    deptFilter(val) {
      getPDepartment({
        DeptName: val
      }).then((res) => {
        if (res.data.code === 200) {
          if (res.data.data.length) {
            this.queryForm[3].options = res.data.data
          }
        }
      })
    },
    // 部门编码模糊查询
    unitCodeFilter(val) {
      getDepartment({
        DeptCode: val
      }).then((res) => {
        if (res.data.code === 200) {
          if (res.data.data.length) {
            this.queryForm[0].options = res.data.data
          }
        }
      })
    },
    // 部门名称模糊查询
    unitFilter(val) {
      getDepartment({
        DeptName: val
      }).then((res) => {
        if (res.data.code === 200) {
          if (res.data.data.length) {
            this.queryForm[1].options = res.data.data
          }
        }
      })
    },
    // 删除
    deleteDetail(row) {
      this.$confirm({
        content: '是否确认删除？',
        title: '温馨提示',
        okFn: (res) => {
          const ids = [row.id]
          batchDeletePerformance(ids).then((res) => {
            if (res.data.code === 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              if (this.pageAttr.total > 10 && this.pageAttr.total % this.pageAttr.pageSize === 1) {
                this.pageAttr.currentPage -= 1
              }
              const params = this.$refs.filterForm.getParms()
              this.getData(params)
            } else {
              this.$message.error(res.data.message)
            }
          })
        }
      })
    },
    dialogClose() {
      this.isEdit = false
      this.dialogVisible = false
      this.$refs.form.resetFields()
    },
    dialogCommit() {
      if (!this.form.deptCode) {
        return this.$message.error('请选择部门')
      }
      if (!this.form.pdeptCode) {
        return this.$message.error('请选择所属科室')
      }
      const deptCode = this.form.deptCode.split('/')[0]
      const deptName = this.form.deptCode.split('/')[1]
      const pdeptCode = this.form.pdeptCode.split('/')[0]
      const pdeptName = this.form.pdeptCode.split('/')[1]
      const params = {
        deptCode, deptName, pdeptCode, pdeptName
      }
      this.btnLoaing = true
      addPerformance(params).then(res => {
        setTimeout(() => {
          this.btnLoaing = false
        }, 500)
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.dialogClose()
          this.pageAttr.currentPage = 1
          this.getData()
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(() => {
        setTimeout(() => {
          this.btnLoaing = false
        }, 500)
      })
    },
    // 新增按钮事件
    addDetail() {
      this.dialogTitle = '新增对应关系'
      this.deptDisabled = false
      this.dialogVisible = true
    },
    // 编辑按钮事件
    editDetail(row) {
      this.isEdit = true
      this.deptDisabled = true
      this.dialogTitle = '修改核算单元'
      this.showDialog(row)
    },
    // 显示新增或编辑 drawer
    showDialog(row) {
      this.dialogVisible = true
    },
    reset() {},
    saveEidtRule() {}
  }
}
</script>

<style lang="less" scoped>
.addbox {
  width: 60%;
}
.model-name {
  width: 70px;
  line-height: 39px;
  text-align: right;
  padding-right: 10px;
}
.model-ban {
  margin-top: 15px;
}
// /deep/ .el-dialog__body{
// }
.dept-type {
  padding: 0 !important;
  flex: 0 0 240px;
  margin-right: 10px;
}
.rule-detail {
  padding: 0 !important;
  flex: 1;
}
.title {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  background-color: #fefefe;
  border-bottom: 1px solid #e8eaed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.edit-detail {
  color: #4073ff;
  cursor: pointer;
}
.button-bar {
  height: 48px;
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 12px;
  // border-bottom: 1px solid #ccc;
  Button:first-of-type {
    margin-right: 12px;
  }
}
.is-child {
  display: inline-block;
  padding-left: 12px;
}
.not-child {
  font-weight: bold;
}
.table-box {
  box-sizing: border-box;
  padding: 12px;
  padding-top: 0;
  height: calc(100% - 130px);
  overflow-y: auto;
}
.query-form {
  // border-bottom: 1px solid #ccc;
  Button {
    margin-left: 12px;
  }
}
.package {
  flex: 0;
  height: 100%;
  width: 78px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: transparent;
}
.is-default {
  color: #4073ff;
}
.set-default {
  margin-right: 4px;
  height: 14px;
  width: 14px;
  border: 1px solid #dcdfe6;
  border-radius: 2px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 1px;
  cursor: pointer;
  i {
    height: 100%;
    width: 100%;
    color: transparent;
  }
}
.current-default {
  background: #4073ff;
  border: 1px solid #4073ff;
  i {
    color: #fff;
  }
}
.query-box {
  flex: 1;
}
/deep/ .dept-type .el-table--enable-row-hover .el-table__body tr:hover > td {
  .current-default {
    background-color: #fff;
    i {
      color: #217dfa;
    }
  }
  .is-default {
    color: #fff;
  }
  background-color: #217dfa;
  color: #fff;
}
/deep/ .el-table__body tr.current-row > td {
  .current-default {
    background-color: #fff;
    i {
      color: #217dfa;
    }
  }
  .is-default {
    color: #fff;
  }
  background-color: #217dfa;
  color: #fff;
}
</style>

